<template>
    <my-dialog 
    v-model="model"
    width="520px"
    title="共享给"
    >
        <div 
        v-if="needToCompleteInfo" 
        class="info"
        >
            请先补充信息，方可使用共享功能，共享只针对本单位的账号。
            <span 
            class="gobtn" 
            @click="goSetInfo"
            >
                去设置
            </span>
        </div>

        <el-input placeholder="共享人的注册手机号" v-model="pgData.mobile">
            <el-button 
            slot="append" 
            icon="el-icon-search"
            @click="queryData"
            >
                搜索
            </el-button>
        </el-input>

        <el-table
        ref="multipleTable"
        :data="tableData"
        class="company-people"
        @selection-change="handleSelectionChange">
            <el-table-column
                type="selection"
                width="55"
            ></el-table-column>
            
            <el-table-column
                prop="mobile"
                label="手机号"
            ></el-table-column>

            <el-table-column
            prop="dwname"
            label="所属公司"
            >
                <template slot-scope="scope">
                    <div>
                        {{scope.row.dwname || '-'}}
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <div class="btns">
            <el-button size="small" type="primary" @click="submitHandler">确认</el-button>
            <el-button size="small" @click="cancleHandler">取消</el-button>
        </div>
    </my-dialog>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
    props: {
        value: {
            type: Boolean,
            default: false,
        },
        data: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        var that = this;

        return {
            pgData: {
                mobile: '',
                fileguid: that.data.fileguid,
            },

            tableData: [],

            multipleSelection: [],
        };
    },
    computed: {
        model: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit('input', val);
            },
        },
        ...mapGetters({
            needToCompleteInfo: 'userinfo/getNeedToCompleteInfo',
        }),
    },
    watch: {
        model(val) {
            if (!val) {
                this.pgData.mobile = '';
                this.multipleSelection = [];
                this.tableData = [];
            }

            if (val) {
                this.queryData();
            }
        },
    },
    methods: {
        ...mapActions({
            openGlobalDialog: 'global-dialog/openGlobalDialog',
        }),
        submitHandler() {
            // if (!this.multipleSelection.length) {
            //     showMsgBox('请选择要分享的手机号');

            //     return;
            // }

            var userid = this.tableData.map(item => item.rowguid).join(',');

            this.tableData.forEach(item => {
                if (this.multipleSelection.some(mi => {
                    return mi.rowguid === item.rowguid;
                })) {
                    item.sharebj = '1';
                } else {
                    item.sharebj = '0';
                }
            });

            var status = this.tableData.map(item => item.sharebj).join(',');

            this.$get(`${this.$store.state.api.sysUrl}/file/bidding/plan/share.json`, {
                userid,
                status,
                fileguid: this.data.fileguid,
            }, (data, res) => {
                if(res.msg) {
                    showMsg(res.msg, 'success');
                }
                
                this.$emit('reload');

                this.cancleHandler();
            });
        },
        cancleHandler() {
            this.model = false;
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        queryData() {
            this.$get(`${this.$store.state.api.sysUrl}/file/bidding/plan/getuser.json`, this.pgData, data => {
                this.tableData = data;

                this.$nextTick(() => {
                    this.tableData.filter(row => row.sharebj === '1').forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                });
            });
        },
        goSetInfo() {
            this.openGlobalDialog({
                name: 'supplement',
            });
        },
    },
    mounted() {
        this.queryData();
    },
}
</script>

<style lang="scss" scoped>
@import '@css/var.scss';
    .company-people{
        width: 100%;
        margin-top: 20px;
    }

    .btns{
        margin-top: 40px;
        text-align: center;
    }
    .info{
        margin-top: -40px;
        margin-bottom: 10px;
        color: #909399;
        .gobtn{
            color: $primaryColor;
            cursor: pointer;
        } 
    }

    
</style>